<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
  <div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
    <a href={~p"/media_profiles"} class="flex flex-col items-center py-2">
      <span class="text-md font-medium">
        Media <.pluralize count={@media_profile_count} word="Profile" />
      </span>
      <h4 class="text-title-md font-bold text-white">
        <.localized_number number={@media_profile_count} />
      </h4>
    </a>
  </div>
  <div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
    <a href={~p"/sources"} class="flex flex-col items-center py-2">
      <span class="text-md font-medium">
        <.pluralize count={@source_count} word="Source" />
      </span>
      <h4 class="text-title-md font-bold text-white">
        <.localized_number number={@source_count} />
      </h4>
    </a>
  </div>
  <div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
    <span class="flex flex-col items-center py-2">
      <span class="text-md font-medium">
        <.pluralize count={@media_item_count} word="Download" />
      </span>
      <h4 class="text-title-md font-bold text-white">
        <.localized_number number={@media_item_count} />
      </h4>
    </span>
  </div>
  <div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
    <span class="flex flex-col items-center py-2">
      <span class="text-md font-medium">Library Size</span>
      <h4 class="text-title-md font-bold text-white">
        <.readable_filesize byte_size={@media_item_size} />
      </h4>
    </span>
  </div>
</div>

<div class="rounded-sm border shadow-default border-strokedark bg-boxdark mt-4 p-5">
  <span class="text-2xl font-medium mb-4">Media History</span>
  <.tabbed_layout>
    <:tab title="Downloaded" id="downloaded">
      {live_render(
        @conn,
        Pinchflat.Pages.HistoryTableLive,
        session: %{"media_state" => "downloaded"}
      )}
    </:tab>
    <:tab title="Pending" id="pending">
      {live_render(
        @conn,
        Pinchflat.Pages.HistoryTableLive,
        session: %{"media_state" => "pending"}
      )}
    </:tab>
  </.tabbed_layout>
</div>

<div class="rounded-sm border shadow-default border-strokedark bg-boxdark mt-4 p-5">
  <span class="text-2xl font-medium mb-4">Active Tasks</span>
  <section class="mt-6 min-h-80">
    {live_render(@conn, Pinchflat.Pages.JobTableLive)}
  </section>
</div>
